/*
  学习目标：生命周期的创建阶段-
  钩子函数： 
  💥注意：早期，只有类组件具有生命周期。
  
  
  | 钩子 函数         | 触发时机                  | 作用                         |
| ----------------- | ------------------------- | ---------------------------- |
| constructor       | 创建组件时，最先执行      | 1. 初始化state  2. 创建Ref等 |
| render            | 每次组件渲染都会触发      | 渲染UI                       |
| componentDidMount | 组件挂载（完成DOM渲染）后 | 1. 发送网络请求   2.DOM操作  |
*/
import React, { Component } from 'react';
export default class App extends Component {
    // 1. 构造函数 - 对标vue中 beforeCreate 和 created
    constructor() {
        super();
        console.log('constructor执行了 ');
        this.state = {
            msg: '123',
        };
        this.textRef = React.createRef();
    }

    // 2.
    render() {
        console.log('render执行了');
        return <h1>123</h1>;
    }

    // 3.挂载后， 对标Mounted
    componentDidMount() {
        console.log('componentDidMount执行了');
        console.log('document.querySelector()  ----->  ', document.querySelector('h1'));
    }
}